<template>
  <div class="container">
    <div class="mainConent">
      <!-- 传入插槽内容 -->
      <slot name="content"></slot>
    </div>
    <div class="mainTool">
      <!-- 工具栏 -->
      <el-tooltip class="box-item" effect="dark" content="复制代码" placement="bottom">
        <el-icon color="rgb(144, 147, 153)" @click="copyCode">
          <CopyDocument />
        </el-icon>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="查看源代码" placement="bottom">
        <el-icon color="rgb(144, 147, 153)" @click="viewCode">
          <DCaret />
        </el-icon>
      </el-tooltip>
    </div>
    <Transition :duration="550" name="nested">
      <div v-if="show" class="outer">
        <div class="inner">
          <article class="markdown-body" v-html="result"></article>
        </div>
        <div class="bottom">
          <el-icon style="color: var(--el-text-color-secondary);">
            <CaretTop />
          </el-icon>
          <span class="span" @click="viewCode">隐藏源代码</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { marked } from 'marked'
import hljs from 'highlight.js' // 代码块高亮
import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
const result = ref('');
// 要显示的 Markdown 文件内容
const content = `# Vue实现Markdown文件内容显示
> 用到的插件有：marked、highlight.js、github-markdown-css
|   插件    |      备注     |
| --------- | ------------- |
| marked    | markdown 显示 |
| highlight | 代码高亮      |
`
result.value = marked.parse(content, {
    highlight: function (code, lang) {
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    }
});
const show = ref(false);
// 复制代码
const copyCode = () => { };
// 点击查看代码
const viewCode = () => {
  show.value = !show.value;
};
</script>

<style scoped>
/* 公共设置 */
.container {
  margin: 0.5px;
  /* padding: 1.5rem; */
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
}

/* 传入插槽 */
.mainConent {
  padding: 1.5rem;
}

/* 工具栏 eg:查看源码等 */
.mainTool {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  height: 40px;
  border-top: 1px solid rgb(220, 223, 230);
}

.mainTool .el-icon {
  margin-right: 10px;
  cursor: pointer;
}
</style>

<style scoped>
/* .outer, */
.inner {
  background: rgb(245, 247, 250);
  border-top: 1px solid rgb(218, 229, 248);
  padding: 30px;
  min-height: 100px;
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgb(218, 229, 248);
  box-sizing: border-box;
  background-color: var(--bg-color, #fff);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: -1px;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 44px;
}

.nested-enter-active,
.nested-leave-active {
  transition: all 0.3s ease-in-out;
}

/* delay leave of parent element */
.nested-leave-active {
  transition-delay: 0.25s;
}

.nested-enter-from,
.nested-leave-to {
  transform: translateY(30px);
  opacity: 0;
}

/* we can also transition nested elements using nested selectors */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

/* delay enter of nested element */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  /*
  	Hack around a Chrome 96 bug in handling nested opacity transitions.
    This is not needed in other browsers or Chrome 99+ where the bug
    has been fixed.
  */
  opacity: 0.001;
}
</style>
